<template>
  <div class="wxamp">
    <div class="wxamp__content">
      <div class="wxamp__list">
        <span class="wxamp__list__left">小程序发版配置</span>
        <div class="wxamp__list__right">
          <a-switch v-model:checked="form.isHide" @change="handleChang" />
          <p class="mt-3 text-gray">
            此配置请在小程序发版上线时打开，请勿随意打开开关会导致小程序无法正常访问。
          </p>
        </div>
      </div>
      <div class="wxamp__list mt-4">
        <span class="wxamp__list__left">AI接口数据形式</span>
        <div class="wxamp__list__right">
          <a-switch v-model:checked="form.isStream" @change="handleStream" />
          <p class="mt-3 text-gray"> false:接口一次性返回，true:接口流式返回。 </p>
        </div>
      </div>
      <div class="wxamp__list mt-4" v-if="false">
        <span class="wxamp__list__left">小程序AI密钥</span>
        <div class="wxamp__list__right">
          <a-textarea
            class="textarea"
            v-model:value="form.aiKey"
            placeholder="请输入AI小程序会话密钥"
            :autosize="{ minRows: 6, maxRows: 6 }"
          />
        </div>
      </div>
      <div class="wxamp__list mt-4">
        <span class="wxamp__list__left"></span>
        <div class="wxamp__list__right">
          <a-button type="primary" :loading="confirmLoading" @click="handleConfirm">确认</a-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { getConfig, updateConfig } from '@/api/wxamp/setting';
  import { message } from 'ant-design-vue';
  import { onMounted, ref } from 'vue';

  // 确定按钮加载状态
  const confirmLoading = ref<boolean>(false);
  interface Form {
    isHide: boolean;
    aiKey: string;
    isStream: boolean;
  }
  // 表单配置
  const form = ref<Form>({
    isHide: false,
    aiKey: '',
    isStream: false,
  });
  // 初始化事件
  onMounted(async () => {
    await getInfo();
  });

  // 获取配置信息
  const getInfo = async () => {
    try {
      const { isHide, isStream } = await getConfig();
      form.value.isHide = isHide;
      form.value.isStream = isStream;
    } catch (error) {
      console.log('获取小程序配置信息异常：', error);
    }
  };
  // 切换开关事件
  const handleChang = (checked: boolean) => {
    form.value.isHide = checked;
  };
  const handleStream = (checked: boolean) => {
    form.value.isStream = checked;
  };
  // 确认事件
  const handleConfirm = async () => {
    try {
      confirmLoading.value = true;
      await updateConfig({
        isHide: form.value.isHide,
        isStream: form.value.isStream,
      });
      confirmLoading.value = false;
      message.success('更新成功');
      await getInfo();
    } catch (error) {
      confirmLoading.value = false;
      console.log('确认事件异常：', error);
    }
  };
</script>
<style lang="less" scoped>
  .wxamp {
    padding: 16px;

    &__list {
      display: flex;

      &__left {
        width: 120px;
        padding-right: 20px;
        line-height: 22px;
      }

      &__right {
        flex: 1;

        .textarea {
          max-width: 600px;
        }
      }
    }

    &__content {
      padding: 20px;
      background-color: @component-background;
    }
  }
</style>
